<template>
  <scroll-view
    scroll-y
    scroll-x
    class="table-container"
    @scroll="boxVisible = false"
    @scrolltolower="scroll"
    :style="{ height: options.height || 'auto' }"
  >
    <view style="width: 100%; height: 100%">
      <table ref="table" class="table" stripe emptyText="暂无更多数据" @click="boxVisible = false">
        <!-- 表头行 -->
        <thead>
          <tr>
            <th
              :align="item.align || 'center'"
              :width="item.width || ''"
              :style="{ minWidth: item.minWidth + 'rpx' || '' }"
              v-for="(item, index) in options.column"
              :key="index"
            >
              <view class="flex-row items-center sort_th" @click.stop="sortFn(item.field, item)">
                <view class="th_name">{{ item.title }}</view>
                <view class="arrow-box" v-if="item.sort">
                  <text
                    class="arrow up"
                    :class="{
                      active: sortType == 'asc' && activeType == item.field,
                    }"
                  ></text>
                  <text
                    class="arrow down"
                    :class="{
                      active: sortType == 'desc' && activeType == item.field,
                    }"
                  ></text>
                </view>
                <!-- <view
                    v-if="item.filter"
                    class="filter_cion"
                    id="technicalDirectorName"
                    @click.stop.prevent="() => showBox(item.field)"
                  >
                    <view class="filter_ico"><text class="filter-icon cuIcon-filter"></text></view>
                  </view> -->
              </view>
            </th>
            <th
              v-if="options.actionConfig && options.actionConfig.show"
              :align="options.actionConfig.align || 'center'"
              :width="options.actionConfig.width || 'auto'"
              :style="{ minWidth: options.actionConfig.minWidth + 'rpx' || '100rpx' }"
            >
              {{ options.actionConfig.title || '操作' }}
            </th>
          </tr>
        </thead>
        <!-- 表格数据行 -->
        <tbody>
          <block v-if="dataList.length">
            <tr :key="index" v-for="(item, index) in dataList">
              <td :align="item.align || 'center'" v-for="(col, idx) in options.column" :key="idx">
                <slot
                  name="column"
                  v-bind="{ row: item, column: col, rowIndex: index, colIndex: idx }"
                >
                  <view
                    :class="item.isAction ? 'primary' : ''"
                    @tap.prevent.stop="clickRow(item, col, index)"
                  >
                    {{ item[col.field] }}
                  </view>
                </slot>
              </td>
              <td
                v-if="options.actionConfig && options.actionConfig.show"
                :align="(options.actionConfig && options.actionConfig.align) || 'center'"
              >
                <slot name="action" v-bind="item"></slot>
              </td>
            </tr>
          </block>
          <block v-else>
            <tr>
              <td align="center" :colspan="options.column.length">暂无数据</td>
            </tr>
          </block>
        </tbody>
      </table>
    </view>
  </scroll-view>
  <!-- <view class="pop" v-if="boxVisible" :style="style">
      <view class="box_content">
        <view
          class="flex-row items-center pad10 box_item"
          v-for="(item, index) in popData[currentType]"
          :key="index"
          @click="searchData(item)"
        >
          <view class="item_name">
            {{ item.technicalDirectorName }}
          </view>
          <view class="item_value">
            {{ item.countNum }}
          </view>
        </view>
      </view>
    </view> -->
  <!-- <view class="cu-tabbar-height"></view> -->
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import Loading from '@/components/loading.vue';

const emits = defineEmits(['sort', 'click', 'scrollToLower']);
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  options: {
    type: Object,
    default: () => {},
  },
});
const dataList = ref([]);
const boxVisible = ref(false);
const style = {
  top: 0,
  left: 0,
};
const activeType = ref('');
const sortType = ref('desc');
const preActiveType = ref('');
watch(
  () => props.data,
  (val) => {
    dataList.value = val || [];
  },
  { immediate: true },
);
const cactivIndex = ref(0);
// 排序
const sortFn = (active, item) => {
  if (!item.sort) return;
  preActiveType.value = activeType.value;
  activeType.value = active;

  const emun = ['desc', 'asc', ''];
  if (preActiveType.value === activeType.value) {
    cactivIndex.value++;
    if (cactivIndex.value > 2) {
      cactivIndex.value = 0;
    }
    sortType.value = emun[cactivIndex.value];
    emits('sort', { sortType: sortType.value, item });
    return;
  }
  cactivIndex.value = 0;
  sortType.value = emun[cactivIndex.value];
  emits('sort', { sortType: sortType.value, item });
};
// 跳转详情
const clickRow = (item, col, index) => {
  emits('click', { row: item, index, column: col });
};
// 下拉加载
const scroll = (e) => {
  emits('scrollToLower', e.detail.direction);
};
// const showBox = () => {};
// export default {
//   data() {
//     return {
//       tableLoading: false,
//       page: 1,
//       limit: 20,
//       total: 0,
//       checkType: '',
//       show_filter: false,
//       taskList: [],
//       taskForm: {
//         appQuery: '',
//       },
//       startDate: null,
//       endDate: null,
//       activeType: 'estimatedCompletionTime',
//       sortType: 'desc',
//       preActiveType: 'estimatedCompletionTime',
//       cactivIndex: 0,
//       style: {
//         top: 0,
//         left: 0,
//       },
//       show_box: false,
//       currentType: '',
//       dataListBack: [],
//       popData: {
//         technicalDirectorName: [],
//       },
//       total: 0,
//       loadStatus: '',
//     };
//   },
//   watch: {
//     cvenname: 'changeCodeByName',
//     'taskForm.appQuery': function (val) {
//       if (!val) {
//         this.taskForm.technicalDirectorName = '';
//       }
//     },
//   },
//   filters: {
//     dateFilter(val, type) {
//       if (!val) return '';
//       if (type == 'date') {
//         return dayjs(val).format('YYYY-MM-DD');
//       }
//       return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
//     },
//   },
//   components: {
//     Loading,
//     myPopup,
//     dateTimePicker,
//     myIcon,
//   },
//   // onPullDownRefresh() {
//   // 	this.handleSearch();
//   // 	this.gethistoryList();
//   // 	setTimeout(() => {
//   // 		uni.stopPullDownRefresh();
//   // 	}, 500)
//   // },
//   onLoad(option) {
//     this.getDataList();
//   },
//   methods: {
//     /**
//      * @desc 分页
//      * */
//     changePage({ type, current }) {
//       this.page = current;
//       this.handleSearch();
//     },
//     scroll(e) {
//       if (e.detail.direction == 'bottom') {
//         if (this.loadStatus == 'loadEnd') return;
//         this.page++;
//         this.getDataList();
//       }
//     },
//     search() {
//       this.page = 1;
//       this.getDataList();
//     },
//     // clear(){
//     // 	this.taskForm.technicalDirectorName=''
//     // 	this.taskForm.appQuery =''
//     // },
//     async showBox(type) {
//       this.currentType = type;
//       // this.setData(type)
//       const { code, data } = await domesticInfo().catch(() => {});
//       if (code != 0) {
//         return;
//       }
//       this.popData[type] = data;
//       const query = uni.createSelectorQuery().in(this);
//       query
//         .select(`#${type}`)
//         .boundingClientRect((data) => {
//           this.style.top = `${data.top + 20}px`;
//           this.style.left = `${data.right - 60}px`;
//         })
//         .exec();
//       this.show_box = !this.show_box;
//     },
//     // 分页 暂时不用了
//     setData(type) {
//       this.popData[type] = [];
//       const arr = [];
//       for (let index = 0; index < this.dataListBack.length - 1; index++) {
//         const element = this.dataListBack[index];
//         const obj = {
//           name: '',
//           count: '',
//         };
//         let count = 1;
//         for (let j = index + 1; j < this.dataListBack.length; j++) {
//           const el = this.dataListBack[j];
//           if (element[type] == el[type]) {
//             count++;
//           }
//           obj.count = count;
//           obj.name = element[type];
//           if (!arr.includes(element[type])) {
//             arr.push(element[type]);
//             this.popData[type].push(obj);
//           }
//         }
//       }
//     },
//     searchData(item) {
//       this.taskForm.appQuery = item.technicalDirectorName;
//       this.taskForm.technicalDirectorName = item.technicalDirectorName;
//       this.page = 1;
//       this.getDataList();
//       this.show_box = false;
//     },
//     sortFn(activeType, sortType) {
//       this.show_box = false;
//       this.preActiveType = this.activeType;
//       this.activeType = activeType;

//       const emun = ['desc', 'asc', ''];
//       if (this.preActiveType == this.activeType) {
//         this.cactivIndex++;
//         if (this.cactivIndex > 2) {
//           this.cactivIndex = 0;
//         }
//         this.sortType = emun[this.cactivIndex];

//         this.page = 1;
//         this.getDataList();
//         return;
//       }
//       this.cactivIndex = 0;
//       this.sortType = emun[this.cactivIndex];
//       this.page = 1;
//       this.getDataList();
//     },

//     handleGoBack() {
//       const pages = getCurrentPages();
//       const prevPage = pages[pages.length - 2]; // 上一个页面
//       prevPage.$vm.getSearchForm();
//       setTimeout(() => {
//         uni.navigateBack({
//           delta: 1,
//         });
//       }, 800);
//     },
//     okFilter() {
//       this.show_filter = false;
//       this.page = 1;
//       this.getDataList();
//     },
//     resetFilter() {
//       this.startDate = '';
//       this.endDate = '';
//       // this.taskForm.jobTypeEnum = "CONFIRM_CARD_NORMAL"
//     },
//     resetSort() {
//       this.sortType = '';
//     },
//     goDetail(item) {
//       this.show_box = false;
//       if (!item.id) return;
//       const params = {
//         id: item.id,
//         procInstId: item.procInstId || '',
//         showType: 'detail',
//         processDefinitionName: '详情',
//       };
//       const option = JSON.stringify(params);
//       uni.navigateTo({
//         url: `/pages/requirement/custom/domestic/review?params=${option}`,
//       });
//     },
//     getDataList() {
//       if (this.page == 1) {
//         this.taskList = [];
//         if (
//           this.sortType == 'desc' &&
//           this.activeType == 'estimatedCompletionTime' &&
//           this.taskForm.appQuery == ''
//         ) {
//           this.dataListBack = [];
//         }
//       }
//       this.loadStatus = '';
//       this.tableLoading = true;
//       const params = {
//         ...this.taskForm,
//         page: this.page,
//         limit: this.limit,
//         orderField: this.activeType,
//         order: this.sortType,
//         startDate: this.startDate,
//         endDate: this.endDate,
//       };

//       if (
//         this.taskForm.technicalDirectorName !== this.taskForm.appQuery &&
//         this.taskForm.technicalDirectorName != ''
//       ) {
//         params.technicalDirectorName = '';
//         this.taskForm.technicalDirectorName = '';
//       } else if (this.taskForm.technicalDirectorName) {
//         // params.technicalDirectorName = params.appQuery
//         params.appQuery = '';
//       }
//       domestic(params)
//         .then(({ code, msg, data }) => {
//           this.tableLoading = false;
//           if (code != 0) {
//             this.$error(msg);
//             return false;
//           }
//           if (
//             this.sortType == 'desc' &&
//             this.activeType == 'estimatedCompletionTime' &&
//             this.taskForm.appQuery == ''
//           ) {
//             this.dataListBack = this.dataListBack.concat(data.list);
//           }
//           // let lastData = this.taskList.find(item=>!item.id)
//           // if (lastData ) {
//           // 	this.taskList.splice(this.taskList.length-1,1)
//           // }
//           if (data.list.length < this.limit) {
//             this.loadStatus = 'loadEnd';
//           }
//           this.total = data.total;
//           this.taskList = this.taskList.concat(data.list);
//           // this.taskList = this.taskList.concat([{
//           // 	technicalDirectorName:'合计',
//           // 	id:'',
//           // 	total:data.total,
//           // 	billCode:"",
//           // 	billDate:"",
//           // 	createName:"",
//           // 	demandDesc:"",
//           // 	overdueDays:"",
//           // 	estimatedCompletionTime:""
//           // }])
//         })
//         .catch((e) => {
//           this.tableLoading = false;
//         });
//     },
//   },
// };
</script>

<style lang="scss" scoped>
.search-form {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}

.table-container {
  width: 100%;
  background: #fff;
}

.table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1100px;
  font-size: 0.875rem;
  font-weight: initial;
  background: #fff;
  border-color: #f7f77f7;
  margin: auto;

  tbody {
    tr {
      &:nth-child(2n) {
        background: #f3f3f3;
      }
    }
  }

  thead {
    // tr{
    // 	position:sticky;
    // 	top:0;
    // 	z-index: 10;
    // }
  }

  th {
    box-sizing: border-box;
    min-width: 120rpx;
    padding: 10rpx;
    height: 88rpx;
    min-width: 80rpx;
    position: relative;
    // &.stricky {
    position: sticky;
    top: -1px;
    z-index: 10;
    // }
    // position:sticky;
    // top:0;
    // z-index: 10;
    // font-size: 0.875rem;
    // font-weight: initial;
    // white-space: pre-line;
    // word-break: break-all;
    // border: 1rpx solid #666;
    border: 1rpx solid #dedede;
    // border: none;
    background-color: #f7f7f7;
    color: #777;

    &[align='center'] {
      text-align: center;
    }

    &[align='left'] {
      text-align: left;
    }

    &[align='right'] {
      text-align: right;
    }
  }

  td {
    box-sizing: border-box;
    padding: 10rpx;
    height: 88rpx;
    min-width: 80rpx;
    position: relative;
    font-size: 0.875rem;
    white-space: normal;
    word-break: break-all;
    // border: 1rpx solid #666;
    border: 1rpx solid #dedede;

    &[align='center'] {
      text-align: center;
    }

    &[align='left'] {
      text-align: left;
    }

    &[align='right'] {
      text-align: right;
    }

    &.danger {
      color: #f56c6c;
    }

    textarea {
      width: auto;
      font-size: 0.875rem;
    }

    input {
      font-size: 0.875rem;
    }

    .more-text {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }

    .link {
      color: #007aff;
    }
  }
}

.stricky {
  background: #f3f3f3;
  position: sticky;
  bottom: 0;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.items-center {
  align-items: center;
}

.pop {
  position: fixed;
  width: 120px;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border-radius: 4px;
  padding: 24rpx;
  z-index: 11;
  box-shadow:
    0 3px 6px -4px #0000001f,
    0 6px 16px #00000014,
    0 9px 28px 8px #0000000d;

  .box_item {
    justify-content: space-between;
    padding: 10rpx 0;

    .item_value {
      color: #f56c6c;
    }
  }
}

.els {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.items-center {
  align-items: center;
}

.sort_th {
  justify-content: center;
}

.uni-btn-v {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.form-btn {
  width: 40%;
  font-size: 14px;
}

.sectionTitle {
  margin: 20rpx 0;
}

.no-data {
  width: 100vw;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 14px;
}

.report-task-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}

.report-task-main {
  background-color: white;
  width: 80%;
  border-radius: 10rpx;
  overflow: hidden;
}

.report-task-title {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-task-content {
  padding: 20rpx 40rpx 40rpx;
  box-sizing: border-box;
}

.report-task-footer {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #f5f5f5;
}

.report-task-footer-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.report-task-textarea {
  width: 100%;
  padding: 20rpx;
  border: 1px solid #f5f5f5;
  min-height: 200rpx;
}

.report-task-footer-item-sure {
  border-left: 1px solid #f5f5f5;
  color: #007aff;
}

.reason-main {
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 14px;
}

.topic {
  margin: 35rpx 30rpx;
  line-height: 100%;
  font-size: 32rpx;
  font-weight: bold;
  text-indent: 10rpx;
  color: #2c2c2c;
  border-left: 7rpx solid #0081ff;
}

.filter {
  padding: 24rpx 30rpx;
  display: flex;
  align-items: center;
}

.filter_container {
  padding: 32rpx;
  background-color: #fff;

  .block {
    ~ .block {
      margin-top: 32rpx;
    }

    .label {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }

  .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    // .date-picker {
    // 	padding: 16rpx;
    // 	text-align: center;
    // 	flex: 1;
    // 	border-radius: 8rpx;
    // 	background-color: #f7f7f7;
    // }
    // .novalue{
    //     font-size: 14px;
    //     color: #8a929f;
    // }

    .tag {
      padding: 16rpx 12rpx;
      border-radius: 8rpx;
      width: 32%;
      min-width: 334rpx;
      margin-bottom: 18rpx;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 26rpx;
      border: 1rpx solid #f7f7f7;
      background-color: #f7f7f7;

      &.active {
        // ToDO
        border-color: #f7f7f7;
        color: #f7f7f7;
      }
    }

    .btn {
      flex: 1;
      padding: 16rpx;
      border-radius: 8rpx;
      text-align: center;
      border: 1rpx solid #dedede;
      background-color: #f7f7f7;
      color: #999;

      ~ .btn {
        margin-left: 24rpx;
      }

      &.primary {
        // TODO
        background-color: #f7f7f7;
        border-color: #f7f7f7;
        color: #fff;
      }
    }
  }
}

.cu-bar .search-form {
  background-color: #f5f5f5;
  line-height: 64rpx;
  height: 64rpx;
  font-size: 24rpx;
  color: #333333;
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0 30rpx;
}

.cu-bar .search-form + .action {
  margin-right: 30rpx;
}

.cu-bar .search-form input {
  flex: 1;
  padding-right: 30rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 26rpx;
  background-color: transparent;
}

.cu-bar .search-form [class*='cuIcon-'] {
  margin: 0 0.5em 0 0.8em;
}

.cu-bar .search-form [class*='cuIcon-']::before {
  top: 0rpx;
}

.arrow-box {
  position: relative;

  .arrow {
    display: block;
    position: relative;
    width: 10px;
    height: 8px;
    // border: 1px red solid;
    left: 5px;
    overflow: hidden;
    cursor: pointer;
  }

  .down {
    top: 3px;

    ::after {
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      left: 2px;
      top: -5px;
      transform: rotate(45deg);
      background-color: #ccc;
    }

    &.active {
      ::after {
        background-color: #007aff;
      }
    }
  }

  .up {
    ::after {
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      left: 2px;
      top: 5px;
      transform: rotate(45deg);
      background-color: #ccc;
    }

    &.active {
      ::after {
        background-color: #007aff;
      }
    }
  }
}

.filter_cion {
  background: #fff;
  width: 10px;
  height: 10px;
  margin-left: 20px;
  // margin-top: 8px;
  position: relative;
}

.primary {
  color: #007aff;
}
</style>
